<template>
  <demoBlock title="自定义指示器">
    <vcu-swipe class="indicator-swipe">
      <vcu-swipe-item>1</vcu-swipe-item>
      <vcu-swipe-item>2</vcu-swipe-item>
      <vcu-swipe-item>3</vcu-swipe-item>
      <vcu-swipe-item>4</vcu-swipe-item>
      <template #indicator="{ active }">
        <div class="custom-indicator">{{ active + 1 }}/4</div>
      </template>
    </vcu-swipe>
  </demoBlock>
</template>

<style lang="less" scoped>
.indicator-swipe {
  .vcu-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    color: white;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
}
</style>
